<template>
    <div class="wrap">
        <dl v-for="(v,i) in list" :key='i' @click='toDetail(v)'>
            <dt><img :src='v.url' alt=""></dt>
            <dd>
                <h3>{{v.title}}</h3>
                <p>{{v.desc}}</p>
                <p>￥{{v.price}}</p>
            </dd>
        </dl>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import {getList} from "../../../api/index"

@Component
export default class Main extends Vue {
    private list:any[]=[]
    created(){
        getList().then((res:any)=>{
            console.log(res.data.data)
            this.list=res.data.data    
            })
    }
    toDetail(v){
        this.$router.push({path:'/detail',query:v})
    }
}
</script>
<style lang='scss' scoped>
.wrap{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    dl{
        width: 50%;
        text-align: center;
        img{
            border-radius: 10px;
        }
    }
}
</style>